<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商品管理</title>
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <link rel="stylesheet" href="../css/style.css">
  <link rel="stylesheet" href="../css/bootstrap.min.css">
  <link rel="stylesheet" href="../js/swiper-bundle.min.js">
  <link rel="stylesheet" href="../css/system.css">
  <script src="../js/ajax.js"></script>
  <script src="../js/jquery.min.js"></script>
  <style>
    .modal-body .row {
      align-items: center;
      text-align: center;
    }

    #category {
      margin-right: 300px;
      border: 1px solid #d8d8d8;
      height: 34px;
      border-radius: 5px;
      outline: 0;
    }
    #updatecategory {
      margin-right: 300px;
      border: 1px solid #d8d8d8;
      height: 34px;
      border-radius: 5px;
      outline: 0;
    }
  </style>

</head>

<body>
  <header>
    <div class="headleft">
      <img src="../img/logo.png" alt="">
      <h3>智慧书城后台管理系统</h3>
    </div>
    <div class="headright">
      <p id="headRight" style="margin: 0;"></p>
      <span>欢迎你, <i id="glname"></i></span>
      <button type="button" class="btn btn-outline-link" style="color: #ffff;" onclick="logout()">退出登录</button>
    </div>
  </header>
  <section>
    <aside>
      <div class="d-flex flex-column flex-shrink-0 p-3 bg-light col-lg-4" style="width: 280px;height: 100vh;;">
        <a href="##" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
          <img src="../img/logo.png" alt="" style="width: 100px;">
          <span class="fs-4">智慧书城</span>
        </a>
        <hr>
        <ul class="nav nav-pills flex-column mb-auto">
          <li class="nav-item">
            <a href="./SystemHomepage.html" class="nav-link link-dark" aria-current="page">
              <span class="iconfont icon-shangpinguanli"></span>
              <i>系统首页</i>
            </a>
          </li>
          <li class="nav-item">
            <a href="./goods.html" class="nav-link active" aria-current="page">
              <span class="iconfont icon-shangpinguanli"></span>
              <i>商品管理</i>
            </a>
          </li>
          <li>
            <a href="./OrderManagement.html" class="nav-link link-dark">
              <span class="iconfont icon-dingdanguanli"></span>
              <i>订单管理</i>
            </a>
          </li>
          <li>
            <a href="./announcement.html" class="nav-link link-dark">
              <span class="iconfont icon-gonggaoguanli"></span>
              <i>公告管理</i>
            </a>
          </li>
          <li>
            <a href="./UserManagement.html" class="nav-link link-dark">
              <span class="iconfont icon-yonghuguanli"></span>
              <i>用户管理</i>
            </a>
          </li>
        </ul>
      </div>
    </aside>
    <main>
      <div class="main-top">
        <p>商品管理</p>
        <span></span>
      </div>

      <div class="container mt-3" style="background: #fff;padding:10px 15px 5px;position: relative;">
        <div style="height:100px;padding-top:10px;">
          <h5 style="font-weight: 600;margin-bottom: 24px;">图书列表</h5>
          <!-- <span style="margin-left: 57px;">图书编号:</span> <input type="text" style="border-top: 1px;margin-right: 30px;"> -->
          <select name="" id="changeCategroy1" onchange="changeCategroy()" style="margin-left: 60px;margin-right: 40px;border: 1px solid #333;outline: 0;">
            <option value="">请选择</option>
            <option value="1">少儿</option>
            <option value="2">经典名著</option>
            <option value="3">散文诗歌</option>
            <option value="4">休闲读物</option>
            <option value="5">历史小说</option>

          </select>
          <span>图书名称:</span> <input type="text" class="likeName">
          <button class="btn btn-primary btn-lg" id="queryName" onclick="queryLikeName()" style="position: absolute;right: 240px;top: 42px;background: #7A81FF;border: 0;">查询</button>
          <button type="button" class="btn btn-primary btn-lg" id="btnn" data-bs-toggle="modal"
            data-bs-target="#myModaAdd1">添加图书</button>

          <!-- 添加模态框 -->
          <div class="modal" id="myModaAdd1">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                  <h4 class="modal-title">商品管理</h4>
                  <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <!-- 模态框内容 -->
                <div class="modal-body">
                  <form action="">
                    <!-- 商品编号 -->
                    <!-- <div class="row" style="margin-bottom: 10px;">
                      <div class="col-lg-3">
                        <span style="font-size: 18px;">商品编号</span>
                      </div>
                      <div class="col-lg-9">
                        <input type="text" class="form-control" id="goodsid" placeholder="请输入商品编号">
                      </div>
                    </div> -->
                    <!-- 图书名称 -->
                    <div class="row" style="margin-bottom: 10px;">
                      <div class="col-lg-3">
                        <span style="font-size: 18px;">图书名称</span>
                      </div>
                      <div class="col-lg-9">
                        <input type="text" class="form-control" id="goodsname" placeholder="请输入商品名称">
                      </div>
                    </div>
                    <!-- 图书价格 -->
                    <div class="row" style="margin-bottom: 10px;">
                      <div class="col-lg-3">
                        <span style="font-size: 18px;">图书价格</span>
                      </div>
                      <div class="col-lg-9">
                        <input type="text" class="form-control" id="goodsprice" placeholder="请输入图书价格">
                      </div>
                    </div>
                    <!-- 图书数量 -->
                    <div class="row" style="margin-bottom: 10px;">
                      <div class="col-lg-3">
                        <span style="font-size: 18px;">图书数量</span>
                      </div>
                      <div class="col-lg-9">
                        <input type="text" class="form-control" id="goodnumber" placeholder="请输入图书数量">
                      </div>
                    </div>
                    <!-- 图书类别 -->
                    <div class="row" style="margin-bottom: 10px;">
                      <div class="col-lg-3">
                        <span style="font-size: 18px;">图书类别</span>
                      </div>
                      <div class="col-lg-9">
                        <select id="category">
                          <option value="">请选择</option>
                          <!-- <option value="1">一班</option>
                            <option value="2">二班</option>
                            <option value="3">三班</option> -->
                        </select>
                      </div>
                    </div>
                  </form>
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                  <button type="button" class="btn" style="background: #7A81FF;color: #fff;" onclick="ok()">确定</button>
                  <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
                </div>

              </div>
            </div>
          </div>
          <!-- 修改模态框 -->
          <div class="modal" id="myModaAdd2">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                  <h4 class="modal-title">商品信息</h4>
                  <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <!-- 模态框内容 -->
                <div class="modal-body">
                  <form action="">
                    <!-- 商品编号 -->
                    <div class="row" style="margin-bottom: 10px;">
                      <div class="col-lg-3">
                        <span style="font-size: 18px;">商品编号</span>
                      </div>
                      <div class="col-lg-9">
                        <input type="text" class="form-control" id="updategid" placeholder="请输入商品编号">
                      </div>
                    </div>
                    <!-- 图书名称 -->
                    <div class="row" style="margin-bottom: 10px;">
                      <div class="col-lg-3">
                        <span style="font-size: 18px;">图书名称</span>
                      </div>
                      <div class="col-lg-9">
                        <input type="text" class="form-control" id="updatename" placeholder="请输入商品名称">
                      </div>
                    </div>
                    <!-- 图书价格 -->
                    <div class="row" style="margin-bottom: 10px;">
                      <div class="col-lg-3">
                        <span style="font-size: 18px;">图书价格</span>
                      </div>
                      <div class="col-lg-9">
                        <input type="text" class="form-control" id="updateprice" placeholder="请输入图书价格">
                      </div>
                    </div>
                    <!-- 图书数量 -->
                    <div class="row" style="margin-bottom: 10px;">
                      <div class="col-lg-3">
                        <span style="font-size: 18px;">图书数量</span>
                      </div>
                      <div class="col-lg-9">
                        <input type="text" class="form-control" id="updatenumber" placeholder="请输入图书数量">
                      </div>
                    </div>
                    <!-- 图书类别 -->
                    <div class="row" style="margin-bottom: 10px;">
                      <div class="col-lg-3">
                        <span style="font-size: 18px;">图书类别</span>
                      </div>
                      <div class="col-lg-9">
                        <select id="updatecategory">
                          <option value="">请选择</option>
                          <!-- <option value="1">一班</option>
                            <option value="2">二班</option>
                            <option value="3">三班</option> -->
                        </select>
                      </div>
                    </div>
                  </form>
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                  <button type="button" class="btn" style="background: #7A81FF;color: #fff;" onclick="goodsUpdate()">确定</button>
                  <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
                </div>

              </div>
            </div>
          </div>
        </div>
        <table class="table table-bordered" style="text-align:center">
          <thead class="table-light" id="td">
            <tr>
              <th>图书编号</th>
              <th>图书名称</th>
              <th>图书价格</th>
              <th>图书数量</th>
              <th>图书类别</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
        <div style="text-align: center;">
          <button class="btn_page" onclick="first()">首页</button>
          <button class="btn_page" onclick="up()">上一页</button>
          <button class="btn_page" onclick="down()">下一页</button>
          <button class="btn_page" onclick="last()">尾页</button>
        </div>
      </div>
    </main>
    <script src="../js/header.js"></script>
    <script src="../js/goods.js"></script>
  </section>
</body>

</html>